<template>
	<div class="environment">
		<!-- 光照值 -->
		<div class="environment-light">
			<span class="title">光照</span>
			<div class="content">
				<el-slider
					v-model="lightValue"
					:step="12.5"
					show-stops
					:format-tooltip="formatTooltip"
					:marks="marks"
				></el-slider>
			</div>
		</div>
		<!-- 天气 -->
		<div class="environment-weather">
			<span class="title">天气</span>
			<div class="content">
				<div class="content-item" v-for="item in weatherGroup" :key="item.id">
					<div class="content-item__title">
						<div>
							<i class="iconfont">{{ item.iconName }}</i>
							<span>{{ item.label }}</span>
						</div>
						<div>
							<el-switch v-model="item.isOpen" @change="changeSwitch(item)"></el-switch>
						</div>
					</div>
					<div class="content-item__value" v-show="item.isOpen">
						<el-slider
							v-model="item.value"
							:marks="item.marks"
							show-stops
							:step="50"
							:show-tooltip="false"
						></el-slider>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
export default {
	name: 'Environment',
	data() {
		return {
			lightValue: 0 /* 光照值 */,
			marks: {
				0: '0',
				12.5: '3',
				25: '6',
				37.5: '9',
				50: '12',
				62.5: '15',
				75: '18',
				87.5: '21',
				100: '24'
			},
			weatherGroup: [
				/* 天气组 */
				{
					id: $xy.RI(),
					label: '云',
					iconName: '\ue649',
					isOpen: false,
					value: 0,
					marks: {
						0: '少云',
						50: '多云',
						100: '阴'
					}
				},
				{
					id: $xy.RI(),
					label: '雨',
					iconName: '\ue611',
					isOpen: false,
					value: 0,
					marks: {
						0: '小雨',
						50: '中雨',
						100: '大雨'
					}
				},
				{
					id: $xy.RI(),
					label: '雪',
					iconName: '\ue650',
					isOpen: false,
					value: 0,
					marks: {
						0: '小雪',
						50: '中雪',
						100: '大雪'
					}
				},
				{
					id: $xy.RI(),
					label: '雾',
					iconName: '\ue612',
					isOpen: false,
					value: 0,
					marks: {
						0: '雾',
						50: '扬尘',
						100: '霾'
					}
				}
			]
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		// 格式化滑块
		formatTooltip(val) {
			switch (val) {
				case 0:
					return '00:00';
				case 12.5:
					return '03:00';
				case 25:
					return '06:00';
				case 37.5:
					return '09:00';
				case 50:
					return '12:00';
				case 62.5:
					return '15:00';
				case 75:
					return '18:00';
				case 87.5:
					return '21:00';
				case 100:
					return '24:00';
			}
		},

		// 开关状态改变
		changeSwitch(val) {
			if (val.isOpen) {
				this.weatherGroup.map((item) => {
					if (item.id !== val.id) {
						item.isOpen = false;
					}
				});
			}
		}
	}
};
</script>
 
<style lang="scss">
.environment {
	font-size: 14px;
	height: 100%;

	.title {
		color: #9e9e9e !important;
		height: 40px !important;

		&:hover {
			color: #9e9e9e !important;
			cursor: inherit !important;
		}
	}

	.content {
		padding: 15px 18px 35px 18px;
	}

	.environment-light {
		.content {
			border-bottom: 1px solid #171717;
		}
	}

	.environment-weather {
		height: calc(100% - 135px);
		overflow: hidden;

		.content {
			padding: 0 12px 8px 12px;
			height: calc(100% - 30px);
			@include xy-scroll;
			overflow-y: auto;

			.content-item {
				margin-bottom: 5px;
				color: #9e9e9e;
				border-radius: 3px;
				overflow: hidden;

				&__title {
					padding: 12px;
					background-color: #2e2f33;
					display: flex;
					justify-content: space-between;

					& > div {
						@include xy-dfc;
					}

					span {
						margin-left: 5px;
						font-size: 12px;
					}
				}

				&__value {
					padding: 0 20px 20px 20px;
					background-color: #2e2f33;
				}
			}
		}
	}
}
</style>